<template>
  <div>
    <section>
      <el-form ref="form" :model="queryForm" label-width="69px" :inline="true" class="queryForm">
        <el-form-item label="关键字:">
          <el-input v-model="queryForm.selectValue" size="small" placeholder="请输入车主姓名/身份证号/手机号"></el-input>
        </el-form-item>
        <el-form-item label="状态:" label-width="85px">
          <el-radio-group v-model="queryForm.checkedState">
            <el-radio v-if="item.value !== '-1'" v-for="item in $dictUtils.getDictList('state')" :key="item.value" :label="Number(item.value)">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div class="but-container">
            <el-button type="primary" style="margin-right:5px" size="small" @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </section>
    <section style="margin-top: -6px">
      <el-button style="margin-left: 0px;margin-right:5px" v-if="hasPermission('truck:truckOwer:add')" type="primary"
        size="small" @click="add">新增</el-button>
      <section class="right-but" style="display:flex">
        <el-button type="text" style="margin-right:-13px"  @click="refreshList(page,orderBy.name,orderBy.method,queryForm.selectValue,queryForm.checkedState)">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
        </el-button>
        <PopoverBut :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </section>
    <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%; margin-top: 10px" border
      :header-cell-style="{ 'background-color': '#eeeeee !important', }"
      :row-class-name="tableRowClassName" @sort-change="sortthiscolumn">
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="names" label="姓名" sortable="ower">
      </el-table-column>
      <el-table-column prop="contactPhone" label="手机号">
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号">
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <section class="activate-state" v-if="scope.row.state===1">
            <i></i>
             {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="inactive-state" v-else>
            <i></i>
            {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
      </el-table-column>
      <span v-for="(item,index) in checkedProps" :key="index">
         <el-table-column  prop="createBy.loginName" :label="item" v-if="item==='创建人'"></el-table-column>
         <el-table-column  prop="createDate" :label="item" v-if="item==='创建时间'"></el-table-column>
         <el-table-column  prop="updateBy.loginName" :label="item" v-if="item==='上次操作人'"></el-table-column>
         <el-table-column  prop="updateDate" :label="item" v-if="item==='上次操作时间'" sortable="update_date"></el-table-column>

      </span>
      <el-table-column prop="address" label="操作" width="259">
        <template slot-scope="scope">
          <template v-for="item in $dictUtils.getDictList('state')">
            <el-link type="primary"  v-if="item.value!=='-1'" :underline="false" @click="editState(item.value,scope.row)"  :disabled="item.value==scope.row.state"
              >{{item.label}}
            </el-link>
          </template>
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckOwer:edit')" @click="edit(scope.row)">修改
          </el-link>
          <el-link type="primary" :underline="false" v-if="hasPermission('truck:truckOwer:del')" @click="del(scope.row.id)">删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @current-change="handleCurrentChange" :page-size="page.pageSize" :current-page="page.pageNo"
      layout="total,prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <OwerFrom ref="owerFrom" @refreshDataList="refreshList(page, 'update_date', 'desc', '', '')"></OwerFrom>
  </div>
</template>
<script>
    import { editState } from '@/api/market/crm.js'
  import OwerFrom from './owerFrom'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      OwerFrom,
      PopoverBut
    },
    data () {
      return {
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
          label: '创建人',
          key: 'createBy.loginName'
        }, {
          label: '创建时间',
          key: 'createDate'
        },{
          label: '更新人',
          key: 'updateBy.loginName'
        }, {
          label: '更新时间',
          key: 'updateDate'
        }],
        queryForm: {
          checkedState: '',
          selectValue: ''
        },
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [{
          names: '11',
          phone: '',
          idcard: ''
        }],
        orderBy: {
          name: 'update_date',
          method: 'desc'
        },
        loading: false
      }
    },
    methods: {
      // 获取数据列表
      refreshList (params, orderName, orderByAORC, selectValue, queryState) {
        this.loading = true
        this.$http({
          url: '/truck/ower/list',
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize,
            'selectValue': selectValue,
            'state': queryState,
            'orderBy': orderName,
            'orderByAORC': orderByAORC
          }
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result.list
            this.page.total = data.result.count
            this.loading = false
          }
        })
      },
    // 改变车主状态
     editState (event, row) {
        this.$confirm('您是否要'+this.$dictUtils.getDictLabel("state", event, "")+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          editState({ id: row.id, state: event }).then((res) => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '状态修改成功'
            })
            this.refreshList(this.page, 'update_date', 'desc', '', '')
          }
        })
        })

      },
      edit (row) {
        this.$refs.owerFrom.init('edit', row)
      },
      add () {
        this.$refs.owerFrom.init('add')
      },
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/ower/delete',
            method: 'delete',
            params: {
              'ids': ids
            }
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, 'update_date', 'desc', '', '')
            }
            this.loading = false
          })
        })
      },
      // 排序
      sortthiscolumn (a) {
        this.orderBy.name = a.prop
        this.page.pageNo = 1
        if (a.order === 'ascending') {
          this.orderBy.method = 'asc'
        } else {
          this.orderBy.method = 'desc'
        }
        this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      },
      // 重置查询条件
      reset () {
        this.queryForm = {}
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.refreshList(this.page, 'update_date', 'desc', '', '')
      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }

    },
    mounted () { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, 'update_date', 'desc', '', '')
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .el-input--small .el-input__inner {
  height: 36px;
  line-height: 32px;
  width: 230px;
}
.queryForm {
  position: relative;
  .but-container {
    top: 20px;
    margin-left: 40px;
  }
}
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
